<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>智能门店管理</title>
    <link rel="stylesheet" href="./fonts/iconfont.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .home {
        font-size: 14px;
        box-sizing: border-box;
        height: 100%;
        overflow: auto;
      }
      
      .home-welcome {
        height: 90px;
        line-height: 90px;
        text-align: center;
        background-color: #ff6600;
        color: #fff;
      }
      
      .home-switch {
        height: 45px;
        line-height: 45px;
        position: relative;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .block-content{
      	background-color: #F0F0F0;
      	border: 1px solid transparent;
      }
      .home-option {
        text-align: center;
        margin: 10px 0 5px 0;
      }
      /*分割符号*/
     .division{
     	display: flex;
     	margin: 15px 0 5px;
     }
     .line{
     	flex: 2;
     	text-align: center;
     }
     .line span{
     	display: inline-block;
     	width: 70%;
     	height: 1px;
     	background-color: #ccc;
     	vertical-align: middle;
     }
     .division-word{
     	flex: 1;
     	text-align: center;
     }
     /**/
      .inner-box {
        padding: 0.6rem 0;
        width: 90%;
        margin-left: 5%;
        background-color: #fff;
        border: 1px dashed #ccc;
        border-radius: 10px;
      }
      
      .inner-box:active {
        background-color: #F7F7F7;
      }
      
      .no-border:active {
        background-color: #F0F0F0;
      }
      
      #switch-link:active {
        color: #888888;
      }
      .iconItem{
      	color: #FF9800;
      	display: block;
      	font-size: 2.4rem;
      	height:3.6rem;
      	line-height: 3.6rem;
      }
      /*侧边栏*/
      
      .mui-off-canvas-left,
      .mui-off-canvas-right {
        background-color: #b9abab !important;
      }
      /**/
      
      .menu-icon {
        float: left;
        margin-top: 30px;
        margin-left: 10px;
        color: #007AFF;
      }
      
      .hearder-box {
        border-radius: 50%;
        overflow: hidden;
        width: 100px;
        margin-left: 50%;
        transform: translate(-50%);
        margin-top: 50px;
      }
      
      .hearder-box img {
        width: 100%;
      }
      
      .userName {
        text-align: center;
        margin: 10px 0 50px;
      }
      
      .mui-fullscreen .mui-off-canvas-wrap .mui-inner-wrap .mui-scroll-wrapper {
        overflow: auto;
      }
    </style>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/1px.css" rel="stylesheet" />
    <script src="config.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    	 <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
          <div class="userInfo">
            <div class="hearder-box">
              <img src="images/head-min.jpg" alt="" />
            </div>
          </div>
          <div class="userName" v-text="originData.userName"></div>
          <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
            <li class="mui-table-view-cell">
              登录选择门店
              <div id="mySwitch" class="mui-switch mui-switch-blue mui-active">
                <div class="mui-switch-handle"></div>
              </div>
            </li>
            <li class="mui-table-view-cell mPassword">
              <a class="mui-navigate-right">
                修改密码
              </a>
            </li>
            <li class="mui-table-view-cell quiet">
              <a class="mui-navigate-right">
                退出登录
              </a>
            </li>
          </ul>
        </aside>
        <!---->
      <div id="app" class="home">
        <div class="mui-inner-wrap ">
          <div id="offCanvasContentScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="home-welcome">
                <span id="username"></span>
                <a href="#offCanvasSide" class="menu-icon left-menu mui-icon mui-icon-list mui-icon-bars mui-pull-left"></a>
              </div>
              <div class="home-switch vux-1px-b">
                <span id="shopname">查询中...</span>
                <i class="mui-icon mui-icon-arrowdown store-switch" id="switch-link" data-src="switch/switch.html" data-wid="switch"></i>
              </div>
              <div class="block-content">
              	<div class="division flex">
              		<div class="line"><span></span></div>
              		<div class="division-word">
              			
              			物流管理
              		</div>
              		<div class="line"><span></span></div>
              	</div>
              	<div class="mui-row">
              		<div v-show="pages.indexOf('purchase')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="进货" data-src="purchase/purchase1.html" data-wid="purchase">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-mobilepurchase"></i>
                    进货
                  </div>
                </div>
                <div v-show="pages.indexOf('withdraw')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="退货" data-src="withdraw/withdraw1.html" data-wid="withdraw">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-Return"></i>
                    退货
                  </div>
                </div>
                <div v-show="pages.indexOf('transfer')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="转发" data-src="transfer/transfer.html" data-wid="transfer">
                  <div class="inner-box">
                  		<i class="iconItem iconfont icon-transfer"></i>
                    转发
                  </div>
                </div>
                <div v-show="pages.indexOf('main')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="收货" data-src="receive/main.html" data-wid="main">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-daijieshoudingdan"></i>
                    收货
                  </div>
                </div>
              	</div>
                <!---->
                <div class="division">
              		<div class="line"><span></span></div>
              		<div class="division-word">
              			礼品销售
              		</div>
              		<div class="line"><span></span></div>
              	</div>
              	<div class="mui-row">
              		 <div v-show="pages.indexOf('machine')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="上架货品" data-src="racking/machine.html" data-wid="machine">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-menu1"></i>
                    礼品上架
                  </div>
                </div>
                <div v-show="pages.indexOf('return')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="回库房" data-src="return/return.html" data-wid="return">
                  <div class="inner-box">
                  		<i class="iconItem iconfont icon-icon-warehouse--sh"></i>
                    礼品回库房
                  </div>
                </div>
                <div v-show="pages.indexOf('recovery')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6" data-title="换积分" data-src="integral/Recovery.html" data-wid="recovery">
                  <div class="inner-box ">
                  		<i class="iconItem iconfont icon-money"></i>
                  	
                    礼品换积分
                  </div>
                </div>
                <div v-show="pages.indexOf('search')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="兑礼品" data-src="exchange/search.html" data-wid="search">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-paw"></i>
                    积分兑礼品
                  </div>
                </div>
                <div v-show="pages.indexOf('ticket')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="彩票补存" data-src="ticket/ticket.html" data-wid="ticket">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-money-score"></i>
                    彩票补存
                  </div>
                </div>
                <div v-show="pages.indexOf('getCoinSearch')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="提币查询" data-src="getCoin/getCoinSearch.html" data-wid="getCoinSearch">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-search"></i>
                    提币查询
                  </div>
                </div>
              	</div>
                <!---->
                <div class="division flex">
              		<div class="line"><span></span></div>
              		<div class="division-word">
              			库存管控
              		</div>
              		<div class="line"><span></span></div>
              	</div>
              	<div class="mui-row">
              		<div v-show="pages.indexOf('stock')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6" data-title="库存" data-src="stock/stock.html" data-wid="stock">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-stock"></i>
                    库存
                  </div>
                </div>
              		<div v-show="pages.indexOf('error')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="误差" data-src="error/error.html" data-wid="error">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-calendar-times-o"></i>
                    误差
                  </div>
                </div>
                <div v-show="pages.indexOf('inventoryList')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6" data-title="盘点" data-src="inventory/InventoryList.html" data-wid="inventoryList">
                  <div class="inner-box">
                  	<i class="iconItem iconfont icon-map"></i>
                    盘点
                  </div>
                </div>
                <!--<div v-show="pages.indexOf('devices1')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="快速抄表" data-src="amr/devices.html" data-wid="devices1">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-tachometer"></i>
                    快速抄表
                  </div>
                </div>-->

                <div v-show="pages.indexOf('devices')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="清点抄表" data-src="amr/devices.html" data-wid="devices">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-check"></i>
                    清点抄表
                  </div>
                </div>
              	</div>
                <div v-show="pages.indexOf('devices1')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="抄表修改" data-src="amr/modifySurface.html" data-wid="devices1">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-tachometer"></i>
    	抄表修改
                  </div>
                </div>
                <!---->
                <div class="division flex">
              		<div class="line"><span></span></div>
              		<div class="division-word">
              			经营监控
              		</div>
              		<div class="line"><span></span></div>
              	</div>
              	<div class="mui-row">
              		<div v-show="pages.indexOf('revenue')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="营收报告" data-src="revenue/tabs.html" data-wid="tabs">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-chart"></i>
                    营收报告
                  </div>
                </div>
                <div v-show="pages.indexOf('devices')!==-1" class="home-option mui-col-xs-6 mui-col-sm-6 " data-title="交款申请" data-src="payment/payment.html" data-wid="payment">
                  <div class="inner-box ">
                  	<i class="iconItem iconfont icon-iocpayment"></i>
                    交款申请
                  </div>
                </div>
              	</div>
                
                
              </div>
              <!--row-->
            </div>
          </div>
          <!-- off-canvas backdrop -->
          <div class="mui-off-canvas-backdrop"></div>
        </div>

      </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            originData: {
              currentShop: '',
              currentShopObj: '',
              userName: '',
              shops: [],
              shopObjs: [],
              allShops: [],
              phonePages:[]
            },
            pages: []
          },
          created: function() {
          	var vm = this
          	 mui.init();
          	 mui.plusReady(function(){
          	 	vm.receiveParams();
          		vm.getStoreList();
          	 })
          },
          mounted: function() {
            this.bindEvent();
            //滚动
            mui('.mui-scroll-wrapper').scroll({
              scrollY: true,
              bounce: true,
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
            });
            this.scrollWapper()
            if(!localStorage.getItem('selectShop')){
            	document.querySelector("#mySwitch").classList.remove('mui-active')
            }
          },
          methods: {
            scrollWapper: function() {
              //侧滑容器父节点
              var offCanvasWrapper = mui('#offCanvasWrapper');
              //主界面容器
              var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
              //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
              var classList = offCanvasWrapper[0].classList;
              //菜单容器
              var offCanvasSide = document.getElementById("offCanvasSide");
              classList.add('mui-slide-in')
            },
            checkLogin: function() {
              var self = plus.webview.currentWebview();
              if(!self.originData) {
                plus.nativeUI.toast('请登录');
                mui.openWindow({
                  id: 'login',
                  url: 'login.html'
                });
                return false;
              }
              return true;
            },
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.originData.shops = self.originData.shops;
              this.originData.currentShop = self.originData.currentShop;
              this.originData.userName = self.originData.userName;
              var vm = this
              vm.phonePages = self.originData.pages
              vm.pages = []
              self.originData.pages.forEach(function(item) {
                vm.pages.push(item.routerName)
              })
            },
            getStoreList: function() {
              var vm = this  
              config.ajax({
                url: config.basePath + '/shops',
                headers: {
                  'Content-Type': 'application/json'
                },
                crossDomain: true,
                dataType: 'json',
                type: 'GET',
                success: function(res) {
                  if(res.result === 1) {
                    vm.originData.allShops = res.merchantStoreList;
                    vm.computedData();
//                  vm.preLoad();
                    vm.updateView();
                  }
                }
              });
            },
            preLoad: function() {
              var id = mui('#switch-link')[0].getAttribute('data-wid');
              var href = mui('#switch-link')[0].getAttribute('data-src');
              mui.preload({
                url: href,
                id: id,
                styles: {
                  titleNView: {
                    titleText: '切换门店',
                    titleColor: "#FFFFFF",
                    titleSize: "17px",
                    backgroundColor: "#FF6800",
                    autoBackButton: true,
                    splitLine: {
                      color: "#CCCCCC",
                      height: "1px"
                    }
                  }
                },
                extras: {
                  shopObjs: this.originData.shopObjs,
                  currentShopObj: this.originData.currentShopObj
                }
              });
            },
            updateView: function() {
              mui('#shopname')[0].innerHTML = this.originData.currentShopObj.storeName;
              mui('#username')[0].innerHTML = this.originData.userName;
            },
            computedData: function() {
            	this.originData.shopObjs = []
              for(var i = 0; i < this.originData.shops.length; i++) {
                for(var j = 0; j < this.originData.allShops.length; j++) {
                  if(this.originData.shops[i] === this.originData.allShops[j].storeId) {
                    this.originData.shopObjs.push(this.originData.allShops[j]);
                  }
                }
              }
              for(var k = 0; k < this.originData.allShops.length; k++) {
                if(this.originData.allShops[k].storeId === this.originData.currentShop) {
                  this.originData.currentShopObj = this.originData.allShops[k];
                }
              }
            },
            bindEvent: function() {
              var vm = this
              window.addEventListener('changeOriginData',
                function(e) {
                  vm.originData.shops = e.detail.shops;
                  vm.originData.userName = e.detail.userName;
                  vm.originData.currentShop = e.detail.currentShop;
                  vm.pages = []
                  e.detail.pages.forEach(function(item) {
                    vm.pages.push(item.routerName)
                  })
                  vm.computedData();
                  vm.updateView();
                }) //退出
              document.querySelector(".quiet").addEventListener('tap', function() {
                var btnArray = ['是', '否'];
                mui.confirm('你确定退出应用？', '退出', btnArray, function(e) {
                  if(e.index == 0) {
                    plus.runtime.quit();
                  } else {}
                });
              })
              //修改密码
              document.querySelector(".mPassword").addEventListener('tap', function() {
                mui.openWindow({
                  url: 'mPassword/mPassword.html',
                  id: 'mPassword',
                  styles: {
                    titleNView: {
                      titleText: '修改密码',
                      titleColor: "#FFFFFF",
                      titleSize: "17px",
                      backgroundColor: "#FF6800",
                      autoBackButton: true,
                      splitLine: {
                        color: "#CCCCCC",
                        height: "1px"
                      }
                    }
                  },
                  extras: {
                    currentShopObj: vm.originData.currentShopObj
                  }
                });
              })
              //是否登录选择门店
              mui("#mySwitch")[0].addEventListener("toggle", function(event) {
                if(event.detail.isActive) {
                  localStorage.setItem('selectShop',true)
                } else {
                  localStorage.removeItem('selectShop')
                }
              })
              mui('.home').on('tap', '.store-switch', function() {
                var id = this.getAttribute('data-wid');
                var href = this.getAttribute('data-src');
                mui.openWindow({
                  url: href,
                  id: id,
                  styles: {
                    titleNView: {
                      titleText: '切换门店',
                      titleColor: "#FFFFFF",
                      titleSize: "17px",
                      backgroundColor: "#FF6800",
                      autoBackButton: true,
                      splitLine: {
                        color: "#CCCCCC",
                        height: "1px"
                      }
                    }
                  },
                  extras: {
                     originData: vm.originData
                  }
                });
              });

              mui('.home').on('tap', '.home-option', function() {
                var id = this.getAttribute('data-wid');
                var href = this.getAttribute('data-src');
                var type
                var pageId
                if(id === 'devices') {
                  type = 1
                } else if(id === 'devices1') {
                  type = 2
                } else if(id==='tabs') {
                	vm.phonePages.forEach(function(item){
                		if(item.routerName === 'revenue') {
                			pageId = item.pageId
                		}
                	})
                }

                if(this.getAttribute('data-title') === '营收报告'){
                  var titleText = this.getAttribute('data-title')
                }else {
                  var titleText = vm.originData.currentShopObj.storeName + '-' + this.getAttribute('data-title');
                }
                if(!id || !href || !titleText) {
                  return;
                }
                mui.openWindow({
                  url: href,
                  id: id,
                  styles: {
                    titleNView: {
                      titleText: titleText,
                      titleColor: "#FFFFFF",
                      titleSize: "17px",
                      backgroundColor: "#FF6800",
                      autoBackButton: true,
                      buttons: [{
                        fontWeight: 'normal',
                        fontSize: '18px',
                        float: 'right',
                        fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                        text: "\ue602",
                        onclick: function() {
                          plus.webview.getWebviewById(id).close();
                        }
                      }],
                      splitLine: {
                        color: "#CCCCCC",
                        height: "1px"
                      }
                    }
                  },
                  extras: {
                    shopObjs: vm.originData.shopObjs,
                    currentShopObj: vm.originData.currentShopObj,
                    type: type,
                    pageId: pageId
                  }
                });
              });
            },
          }
        })
    </script>
  </body>

</html>